<template>
  <vue-draggable-resizable
    id="echart-pane"
    @dragging="onDrag"
    @resizestop="onResizstop"
    :w="800"
    :h="500"
    :resizable="isChangeSize"
  >
    <div
      id="echart-line"
      :style="{ width: 800, height: 500 }"
      v-show="chartType != 'table'"
    ></div>
    <div id="echart-table" v-show="chartType == 'table'">
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :pagination="false"
      >
      </a-table>
    </div>
  </vue-draggable-resizable>
</template>

<script>
import VueDraggableResizable from "vue-draggable-resizable";
import "vue-draggable-resizable/dist/VueDraggableResizable.css";
import echarts from "echarts";
const columns = [
  {
    title: "类型",
    dataIndex: "roadType",
    key: "roadType",
  },
  {
    title: "里程（km）",
    dataIndex: "kilometre",
    key: "kilometre",
  },
];
export default {
  data() {
    return {
      option: undefined,
      chartType: null,
      data: [],
      columns,
      isChangeSize: true,
    };
  },

  mounted() {},
  components: {
    VueDraggableResizable,
  },

  methods: {
    buildTable(obj) {
      let data = obj.data;
      let i = 0;
      let total = 0;
      data.map((item) => {
        total = total + parseFloat(item[obj.ykeyname]);
        this.data.push({
          key: i++,
          roadType: item[obj.xkeyname],
          kilometre: parseFloat(item[obj.ykeyname]),
        });
      });
      if (total)
        this.data.push({
          key: i++,
          roadType: "总计",
          kilometre: total,
        });
    },
    dealstatisticsData(obj, chartType) {
      this.data = [];
      let data = obj.data;
      let xkeyname = obj.xkeyname;
      let ykeyname = obj.ykeyname;
      let yname = obj.yname;
      let xname = obj.xname;
      this.chartType = chartType;
      this.isChangeSize = true;
      if (chartType == "table") {
        this.isChangeSize = false;
        this.columns[1].title = yname;
        this.buildTable(obj);
        this.initTable();
        return;
      }

      if (Array.isArray(data)) {
        let xData = [];
        let yData = [];
        data.map((item) => {
          xData.push(item[xkeyname]);
          yData.push(parseFloat(item[ykeyname]));
        });
        this.setoption(chartType, xData, yData, yname, xname);
        this.initChart(xData, yData);
        return;
      }
      let xData = [];
      let yData = [];
      for (let key in data) {
        xData.push(key);
        yData.push(parseFloat(data[key]));
      }
      this.setoption(chartType, xData, yData, yname, xname);
      this.initChart(xData, yData);
    },
    alertmessage() {
      this.$message.destroy();
      setTimeout(this.$message.info("按下拖拽"), 500);
    },
    onResizstop(e1, e2, e3, e4) {
      if (this.getchart) {
        this.getchart.resize({
          width: e3,
          height: e4,
        });
      } else {
        document.getElementById("echart-pane").style.width = `${e3}px`;
        document.getElementById("echart-pane").style.height = `${e4}px`;
        document.getElementById("echart-table").style.width = `${e3 - 5}px`;
        document.getElementById("echart-table").style.height = `${e4}px`;
        let data = this.data;
        this.data = [];
        this.data = data;
        // document.getElementsByClassName(
        //   "ant-table"
        // )[0].style.height = `${e4}px  !important`;
        // document.getElementsByClassName("ant-table")[0].style.width = `${e3}px`;
      }
    },
    onDrag() {},
    setoption(type, xData, yData, yname, xname) {
      if (type == "line" || type == "bar") {
        this.option = {
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: [],
            bottom: "0%",
          },
          grid: {
            top: "10%",
            left: "5%",
            right: "8%",
            bottom: "2%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: xData,
            name: xname || "",
            // x轴文字倾斜
            axisLabel: {
              interval: 0,
              rotate: 45, //倾斜度 -90 至 90 默认为0
              margin: 2,
              textStyle: {
                fontWeight: "bolder",
                color: "#000000",
              },
            },
          },
          yAxis: {
            type: "value",
            name: yname || "数据量（单位：个）",
          },
          series: [
            {
              data: yData,
              type: type,
              showBackground: true,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
            },
          ],
        };
      } else {
        let data = [];
        for (let i = 0; i < xData.length; i++) {
          data.push({
            name: xData[i],
            value: yData[i],
          });
        }
        this.option = {
          title: {
            text: yname || "要素数量",

            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: "50%",
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
      }
    },
    initTable() {
      document.getElementById("echart-pane").style.width = "800px";
      document.getElementById("echart-pane").style.height = "500px";
    },
    initChart() {
      let opts = {};
      let chartdiv = document.getElementById("echart-line");
      this.getchart = echarts.init(chartdiv, opts);
      this.getchart.setOption(this.option, true);
      document.getElementById("echart-pane").style.width = "800px";
      document.getElementById("echart-pane").style.height = "500px";
      this.getchart.resize({
        width: 800,
        height: 500,
      });
    },
  },
};
</script>

<style lang="less" scoped>
#echart-pane {
  position: fixed;
  z-index: 999999 !important;
  border: 2px solid;
  border-color: #d19873;
  border-radius: 3px;
  right: 360px;
  top: 100px;
  background: #ffff;
}
</style>
